<template>
  <div class="comp-header-wrapper">
    <div class="page-common-head">
      <div class="nva-wrapper">
        <h1 class="nav-left" @click="jumpHome">{{ProjectName}}</h1>
        <div class="nav-right" v-if="currentPlatform=='web'">
          <router-link v-for="(item,index) in allRouter" :key="index" :to="item.path">{{item.meta.title}}</router-link>
        </div>
        <template v-else>
          <div class="m-nav-right">
            <span>{{newName.name}}</span>
            <span class="iconfont icon-zhankai" @click="openDrawer"></span>
          </div>
          <el-drawer v-model="drawerBox" direction="rtl" size="34%" :modal="true" :show-close="false">
            <p class="box" v-for="(item,index) in allRouter" :key="index" @click="jumpDetail(item)">
              <router-link :to="item.path">{{item.meta.title}}</router-link>
            </p>
          </el-drawer>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router';
const router = useRouter()

const ProjectName = $const.PROJECT_NAME
const currentPlatform = ref('web')

const newName = reactive({ name: '网站首页', path: 'home', })
router.beforeEach((to, form, next) => {
  newName.name = to.meta.title
  next()
});

const allRouter = router.getRoutes().filter(item => item?.meta.isNav)

const drawerBox = ref(false)
const openDrawer = () => {
  drawerBox.value = true
}

const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
if (screenWidth.value <= 750) {
  currentPlatform.value = 'mobile'
}


const jumpDetail = () => {
  drawerBox.value = false
}

const handleResize = () => {
  window.onresize = () => {
    screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    console.log('screenWidth.value', screenWidth.value)
    if (screenWidth.value && screenWidth.value <= 750) {
      currentPlatform.value = 'mobile'
    } else {
      currentPlatform.value = 'web'
    }
  }
}

const jumpHome = () => {
  router.push({
    name: 'Home'
  })
}

onMounted(() => {
  handleResize()
})
</script>

<style lang="scss" scoped>
.comp-header-wrapper {
  position: relative;
  min-height: 60px;
}
.page-common-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #e7e7e7;
  z-index: 9;
  height: 60px;
  .nva-wrapper {
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    .nav-left {
      color: #777;
      font-size: 22px;
      cursor: pointer;
    }
    .nav-right {
      a {
        position: relative;
        color: #777;
        font-size: 16px;
        margin-left: 25px;
      }
      .active {
        color: #4d85ff;
      }
    }
    .m-nav-right {
      color: #777;
      font-size: 16px;
      display: flex;
      align-items: center;
      span:nth-child(1) {
        margin-right: 15px;
      }
      .icon-zhankai {
        font-size: 25px;
        margin-right: 5px;
      }
    }
  }
  :deep(.box) {
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    a {
      color: black;
    }
    .active {
      border-bottom: 1px solid red;
    }
  }
}
</style>